<template>
  <view class="chat-item">
    <text class="chat-time"> 时间 </text>
    <view :class="{ 'chat-container': true, 'chat-location-me': false }">
      <view class="chat-icon-container">
        <image class="chat-icon" src="../../static/logo.png" mode="aspectFill" />
      </view>
      <view class="chat-content-container">
        <text :class="{ 'chat-user-name': true, 'chat-location-me': false }"> 名称 </text>
        <view class="chat-text-container-super" :style="[{ justifyContent: false ? 'flex-end' : 'flex-start' }]">
          <view :class="{ 'chat-text-container': true, 'chat-text-container-me': false }">
            <text :class="{ 'chat-text': true, 'chat-text-me': false }">对话内容</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.chat-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}
.chat-time {
  padding: 4rpx 0rpx;
  text-align: center;
  font-size: 22rpx;
  color: #aaaaaa;
}
.chat-container {
  display: flex;
  flex-direction: row;
}
.chat-location-me {
  flex-direction: row-reverse;
  text-align: right;
}
.chat-icon-container {
  margin-top: 12rpx;
}
.chat-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #eeeeee;
}
.chat-content-container {
  margin: 0rpx 15rpx;
}
.chat-user-name {
  font-size: 26rpx;
  color: #888888;
}
.chat-text-container {
  text-align: left;
  background-color: #f1f1f1;
  border-radius: 8rpx;
  padding: 10rpx 15rpx;
  margin-top: 10rpx;
  /* #ifndef APP-NVUE */
  max-width: 500rpx;
  /* #endif */
}
.chat-text-container-me {
  background-color: #007aff;
}
.chat-text-container-super {
  display: flex;
  flex-direction: row;
}
.chat-text {
  font-size: 28rpx;
  /* #ifndef APP-NVUE */
  word-break: break-all;
  /* #endif */
  /* #ifdef APP-NVUE */
  max-width: 500rpx;
  /* #endif */
}
.chat-text-me {
  color: white;
}
</style>
